<template>
    <div class="toggle-box">
      <div class="pic">
        <img
          src="/src/assets/img/vector.png"
          @click="toggleToVect"
          :class="{ 'active': activeImage === 'vect' }"
        />
      </div>
      <div class="pic">
        <img
          src="/src/assets/img/image.png"
          @click="toggleToImage"
          :class="{ 'active': activeImage === 'image' }"
        />
      </div>
    </div>
</template>
  
  <script setup>
  import { ref } from 'vue';
  import { Vmap } from "./Hooks/map.js";
  
  const activeImage = ref(null);
  
  const toggleToVect = () => {
    activeImage.value = 'vect';
    Vmap.setVisible(true);
  };
  
  const toggleToImage = () => {
    activeImage.value = 'image';
    Vmap.setVisible(false);
  };
  </script>
  
  <style scoped lang="scss">
  .toggle-box {
    width: 200px;
    position: absolute;
    bottom: 50px;
    right: 10px;
    display: flex;
    gap: 20px;
    background-color: #ffffff; // 更改背景颜色为白色
    padding: 10px; // 添加内边距
    border-radius: 8px; // 添加圆角
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影
  }
  
  .toggle-box img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    padding: 5px;
    border: 2px solid #e0e0e0; // 更改默认边框颜色为浅灰色
    transition: border-color 0.3s ease;
  
    &:hover {
      border-color: #409eff;
      cursor: pointer;
    }
  
    &.active {
      border-color: #409eff;
    }
  }
  </style>